<template>
    <div id="roleManage">
        <span>角色名称：</span>
        <el-select v-model="role" placeholder="请选择" @change="selectChanged">
            <el-option
            v-for="item in roles"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <div class="roleManage-main">
            <ul>
                <li v-for="(item, index) in list1" :key="index">
                    <span style="text-align:right;" @click="SettingPopup('Mybutton','fade')">权限配置<i class="el-icon-s-tools"></i></span>
                    <div style="width:100%;display: flex;justify-content: center;">
                        <el-avatar :size="60" :src="item.headPortrait"></el-avatar>
                    </div>
                    <p>{{item.role}}</p>
                    <div class="text">
                        {{item.msg}}
                    </div>
                    <p>该角色目前已配置<span style="color:red;">{{item.num}}</span>个账号</p>
                    <!-- <p>查看权限</p> -->
                    <div class="btn">
                        <el-button @click="AddUserPopup('Mybutton','fade',item)">新增账号</el-button>
                        <el-button @click="toAccountNumManage">管理账号</el-button>
                    </div>
                </li>
                <li>
                    <div style="width:100%;width: 80px;display: block;margin: 0 auto;height: 80px;background-color: #eee;border-radius: 50%;position: relative;margin-top: 10%;">
                        <i class="el-icon-plus" style="position: absolute;top: 12%;font-size: 4rem;color: #fff;left: 12%;"></i>
                    </div>
                    <p style="color:#000;">自定义</p>
                    <div class="text">
                        配置自定义角色，并在该角色下配置员工账号，灵活运用该平台。
                    </div>
                    <div class="btn">
                        <el-button style="background-color:RGB(78,115,185);color:#fff;" @click="SettingPopup('Mybutton','fade')">新增角色</el-button>
                    </div>
                </li>
            </ul>
        </div>
        <!--弹出层时的遮罩层-->
        <div id="fade" class="black_overlay"></div>
        <!-- 弹出的内容 -->
        <div id="Mybutton" class="white_content popupWidth-PRManage">
            <Popup v-if="isSettingPopup == true"></Popup>
            <AddUserPopup v-if="isAddUserPopup == true"></AddUserPopup>
            <!-- 点击关闭弹出层 -->
            <span style="font-size: 16px;" @click="CloseDiv('Mybutton','fade')">X</span>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import "@/assets/css/popup";
.popupWidth-PRManage{
    width: 70%;
    height: 70%;
    left:15%;
    transform: translateX(-15%);
    top: 50%;
    transform: translateY(-50%);
}
#roleManage{
    width: 100%;
    height: 100%;
    .roleManage-main{
        width: 100%;
        height: 100%;
        ul{
            margin-top: 1%;
            width: 100%;
            height: 100%;
        }
        li{
            float: left;
            width: 22%;
            height: 39%;
            min-height: 39%;
            margin-right: 1%;
            padding: 1%;
            border: 1px #eee solid;
            position: relative;
            display: flex;
            flex-direction: column;
            .text{
                flex: 1;
                text-indent: 2em;
                line-height: 25px;
                overflow: hidden;			
                text-overflow: ellipsis;		
                display: -webkit-box;
                -webkit-line-clamp: 3;		
                line-clamp: 3;				
                -webkit-box-orient: vertical;
            }
            .btn{
                display: flex;
                justify-content: center;
                .el-button{
                    float: left;
                    background-color: #eee;
                }
            }
            p{
                line-height: 40px;
            }
            p:nth-of-type(1){
                text-align: center;
                font-size: 1.2rem;
                font-weight: bold;
            }
            p:last-of-type{
                color: blue;
            }
        }
        li:nth-of-type(n+4){
            margin-right: 0;
        }
    }
}
</style>
<script>
import $ from 'jquery'
import Popup from "@/viewsF/jurisdictionManage/role/roleJurisdictionSetPopup"
import AddUserPopup from '@/viewsF/jurisdictionManage/role/AddUserPopup'
export default {
    components:{
        Popup,
        AddUserPopup
    },
    data(){
        return{
            role:'',
            roles: [{
                value: '超级管理员',
                label: '超级管理员'
            },{
                value: '管理员',
                label: '管理员'
            },{
                value: '财务人员',
                label: '财务人员'
            },{
                value: '物业',
                label: '物业'
            },],
            infoList: [{
                id: 1,
                headPortrait: require('@/assets/img/headPortrait1.jpg'),
                role: '管理员',
                msg: '这是一个管理员的描述....这是一个管理员的描述....这是一个管理员的描述....这是一个管理员的描述....这是一个管理员的描述....这是一个管理员的描述....这是一个管理员的描述....这是一个管理员的描述....',
                num: 10,
                jurisdiction: ''
            },{
                id: 2,
                headPortrait: require('@/assets/img/headPortrait2.jpg'),
                role: '超级管理员',
                msg: '这是一个管理员的描述....这是一个管理员的描述....这是一个管理员的描述....这是一个管理员的描述....这是一个管理员的描述....',
                num: 10,
                jurisdiction: ''
            }],
            list1: [],
            // 判断显示哪个弹窗
            isAddUserPopup: false,
            isSettingPopup: false
        }
    },
    methods:{
        selectChanged(){
            this.list1 = this.$searchVal.searchEvent (this.infoList, this.role, 'role')
            this.total = this.list1.length
        },
        // qu用户管理
        toAccountNumManage(){
            this.$router.push('/jurisdictionManage/account')
        },
        // 弹窗
        ShowDiv(Mybutton,bg_div){
            document.getElementById(Mybutton).style.display='block';
            document.getElementById(bg_div).style.display='block' ;
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth;
            $("#"+bg_div).height($(document).height());
        },
        SettingPopup(Mybutton,bg_div){
            $('.popupWidth-PRManage').css({"width":"50%", "height": "auto", "left": "25%", "padding": "0"})
            this.isSettingPopup = true
            this.isAddUserPopup = false
            this.ShowDiv(Mybutton,bg_div)
        },
        AddUserPopup(Mybutton,bg_div){
            $('.popupWidth-PRManage').css({"width":"50%", "height": "auto", "left": "25%", "padding": "0"})
            this.isAddUserPopup = true
            this.isSettingPopup = false
            this.ShowDiv(Mybutton,bg_div)
        },
        // 关闭弹窗
        CloseDiv(Mybutton,bg_div){
            this.isSettingPopup = false
            this.isAddUserPopup = false
            document.getElementById(Mybutton).style.display='none';
            document.getElementById(bg_div).style.display='none';
        },
    },
    created(){},
    mounted(){
        // alert($(window).width())
        this.list1 = this.infoList
    },
}
</script>